<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <!-- <crudOperation :permission="permission" /> -->
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="list" size="small" style="width: 100%;">
        <el-table-column prop="productNo" label="物料编号" />
        <el-table-column prop="serialNo" label="标签号" />
        <el-table-column prop="productDescription" label="物料描述" />
        <el-table-column prop="scanCount" label="扫码次数" />
        <el-table-column prop="receiverName" label="客户" />
        <el-table-column prop="partnerProductNo" label="客户物料编号" />
        <el-table-column prop="parentPalletId" label="母托ID" />
        <el-table-column prop="parentPalletCode" label="母托编码" />
        <el-table-column prop="containerType" label="容器类型" />
        <el-table-column prop="storageId" label="储位ID" />
        <el-table-column prop="qty" label="数量" />
        <el-table-column prop="nb" label="箱数" />
        <el-table-column prop="netWeight" label="净重" />
        <el-table-column prop="weightUom" label="重量单位" />
        <el-table-column prop="creationDate" label="生产日期" />
        <el-table-column prop="quality" label="良品/不良品">
          <template slot-scope="scope">
            {{ dict.label.production_quality[scope.row.quality] }}
          </template>
        </el-table-column>
        <el-table-column prop="frozen" label="冻结状态">
          <template slot-scope="scope">
            {{ dict.label.material_frozen[scope.row.frozen] }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="物料状态">
          <template slot-scope="scope">
            {{ dict.label.material_status[scope.row.status] }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :current-page="query.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import crudInboundOrderDetail from '@/api/work/inBoundOrderDetail'
import { getListAPI } from '@/api/work/inBoundOrderDetail'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import pagination from '@crud/Pagination'

const defaultForm = { id: null, inboundOrderNo: null, productNo: null, productDescription: null, partnerProductNo: null, destination: null, batchNo: null, quality: null, qty: null, nb: null, netWeight: null, weightUom: null, creationDate: null, containerType: null, parentPalletCode: null, frozen: null, status: null, finishTime: null, createTime: null, createName: null, parentPalletId: null, storageId: null }
export default {
  name: 'InBoundOrderDetail',
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['material_frozen', 'material_status', 'production_quality'],
  cruds() {
    return CRUD({ title: 'inbound_order_datail', url: 'api/inboundOrderDetail', idField: 'id', sort: 'id,desc', crudMethod: { ...crudInboundOrderDetail },
      queryOnPresenterCreated: false
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'inboundOrderDetail:add', 'otherUser'],
        edit: ['admin', 'inboundOrderDetail:edit', 'otherUser'],
        del: ['admin', 'inboundOrderDetail:del', 'otherUser']
      },
      rules: {
        id: [
          { required: true, message: '入库单主键ID不能为空', trigger: 'blur' }
        ],
        inboundOrderNo: [
          { required: true, message: '入库单号不能为空', trigger: 'blur' }
        ],
        productNo: [
          { required: true, message: '物料编号不能为空', trigger: 'blur' }
        ]
      },
      list: [],
      query: {
        inboundOrderNo: '',
        current: 1,
        size: 10
      },
      total: 0,
      loading: false,
      inboundOrderNo: null
    }
  },
  created() {
    this.query.inboundOrderNo = this.$route.query.inboundOrderNo
  },
  mounted() {
    this.toQuery()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    toQuery() {
      this.query.current = 1
      this.getTable()
    },
    async getTable() {
      try {
        this.loading = true
        const res = await getListAPI(this.query)
        this.list = res.data.content
        this.total = res.data.totalElements
      } finally {
        this.loading = false
      }
    },
    handleSizeChange(e) {
      this.query.size = e
      this.query.current = 1
      this.getTable()
    },
    handleCurrentChange(e) {
      this.query.current = e
      this.getTable()
    }
  }
}
</script>

<style scoped>

</style>
